<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--组织数据-->
			<el-col :span="4" :xs="24">
				<el-card shadow="always">
					<div class="head-container">
						<el-input
							v-model="state.organizationName"
							placeholder="请输入组织名称"
							clearable
							prefix-icon="el-icon-search"
							style="margin-bottom: 20px"
						/>
					</div>
					<div class="head-container">
						<el-tree
							:data="state.organizationOptions"
							:props="state.defaultProps"
							node-key="organizationId"
							:expand-on-click-node="false"
							:filter-node-method="filterNode"
							ref="tree"
							default-expand-all
							@node-click="handleNodeClick"
						/>
					</div>
				</el-card>
			</el-col>
			<el-col :span="20" :xs="24">
				<el-card shadow="always">
					<!-- 查询 -->
					<el-form :model="state.queryParams" ref="queryForm" :inline="true" label-width="68px">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="state.queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="handleQuery"> <SvgIcon name="elementSearch" />搜索</el-button>
							<el-button @click="resetQuery">
								<SvgIcon name="elementRefresh" />
								重置
							</el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<el-card class="box-card">
					<template #header>
						<div class="card-header">
							<span class="card-header-text">员工档案列表</span>
							<div>
								<el-button type="primary" plain v-auth="'team:staff:add'" @click="onOpenAddModule"><SvgIcon name="elementPlus" />新增</el-button>
								<el-button type="danger" plain v-auth="'team:staff:delete'" :disabled="state.multiple" @click="onTabelRowDel"
									><SvgIcon name="elementDelete" />删除</el-button
								>
							</div>
						</div>
					</template>
					<!--数据表格-->
					<el-table v-loading="state.loading" :data="state.tableData" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" align="center" />
						<el-table-column label="姓名" align="center" prop="name" />
						<el-table-column label="生日" align="center" prop="birthday"
							><template #default="scope">
								<span>{{ scope.row.birthday && dateStrFormat(scope.row.birthday).substring(0, 10) }}</span>
							</template>
						</el-table-column>
						<el-table-column label="身份证号码" align="center" prop="idCard" />
						<el-table-column label="转正日期" align="center" prop="confirmationDate" width="180">
							<template #default="scope">
								<span>{{ scope.row.confirmationDate && dateStrFormat(scope.row.confirmationDate).substring(0, 10) }}</span>
							</template>
						</el-table-column>
						<el-table-column label="社保参保日期" align="center" prop="securityDateStart" width="180">
							<template #default="scope">
								<span>{{ scope.row.securityDateStart && dateStrFormat(scope.row.securityDateStart).substring(0, 10) }}</span>
							</template>
						</el-table-column>
						<el-table-column label="督导" align="center" prop="supervision" />
						<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
							<template #default="scope">
								<el-popover placement="left">
									<template #reference>
										<el-button type="primary" circle><SvgIcon name="elementStar" /></el-button>
									</template>
									<div>
										<el-button text type="primary" v-auth="'team:staff:edit'" @click="onOpenEditModule(scope.row)">
											<SvgIcon name="elementEdit" />修改
										</el-button>
									</div>
									<div>
										<el-button text type="primary" v-auth="'team:staff:delete'" @click="onTabelRowDel(scope.row)">
											<SvgIcon name="elementDelete" />删除
										</el-button>
									</div>
									<div>
										<el-button text type="primary" v-auth="'team:staff:detail'" @click="onTableRowCheck(scope.row)">
											<SvgIcon name="byte-align-text-both-one" />详情
										</el-button>
									</div>
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页设置-->
					<div v-show="state.total > 0">
						<el-divider></el-divider>
						<el-pagination
							background
							:total="state.total"
							:current-page="state.queryParams.pageNum"
							:page-size="state.queryParams.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
						/>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 添加或修改岗位对话框 -->
		<EditModule
			:sysFiles="state.sysFiles"
			:organizationOption="state.organizationOption"
			:postsOption="state.postsOption"
			ref="editModuleRef"
			:title="state.title"
		/>
		<DetailModule ref="detailModuleRef" :title="state.title" />
	</div>
</template>

<script lang="ts" setup name="Staff">
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getStaff, delStaff } from '@/api/staff/api';
import { treeselect } from '@/api/system/organization';
import EditModule from './component/editModule.vue';
import DetailModule from './component/detailModule.vue';

const { proxy } = getCurrentInstance() as any;
const editModuleRef = ref();
const detailModuleRef = ref();

const state = reactive({
	// 遮罩层
	loading: true,
	// 选中数组
	ids: [],
	// 非单个禁用
	single: true,
	// 组织名称
	organizationName: undefined,
	// 非多个禁用
	multiple: true,
	// 弹出层标题
	title: '',
	// 表格数据
	tableData: [],
	// 总条数
	total: 0,
	defaultProps: {
		children: 'children',
		label: 'organizationName',
	},
	// householdNatureOptions字典数据
	householdNatureOptions: [],
	// idTypeOptions字典数据
	idTypeOptions: [],
	// levelEducationOptions字典数据
	levelEducationOptions: [],
	// marriageOptions字典数据
	marriageOptions: [],
	// positionStatusOptions字典数据
	positionStatusOptions: [],
	// sexOptions字典数据
	sexOptions: [],
	// 组织树选项
	organizationOptions: undefined,
	// 岗位表格数据
	postsOption: [],
	// 部门表格数据
	organizationOption: [],
	// 文件列表数据
	sysFiles: [],
	// 查询参数
	queryParams: {
		// 页码
		pageNum: 1,
		// 每页大小
		pageSize: 10,
		// 以下为参数
		id: undefined,
		name: undefined,
		organization_id: undefined,
		list: true,
	},
	isDetail: false,
});

// 筛选节点
const filterNode = (value: string, data: any) => {
	if (!value) return true;
	return data.organizationName.includes(value);
};

/** 查询组织下拉树结构 */
const getTreeselect = async () => {
	treeselect().then((response) => {
		state.organizationOptions = response.data;
	});
};

// 节点单击事件
const handleNodeClick = (data: any) => {
	state.queryParams.organization_id = data.organizationId;
	handleQuery();
	state.queryParams.organization_id = 0;
};

/** 查询列表 */
const handleQuery = () => {
	state.loading = true;
	getStaff(state.queryParams).then((response: any) => {
		state.tableData = response.data.data || [];
		state.total = response.data.total;
		state.loading = false;
		const Op1 = response.data.linkTable.sys_posts || [];
		const Op2 = response.data.linkTable.sys_organizations || [];
		const Op3 = response.data.linkTable.sys_files || [];
		state.postsOption = Op1.map((item: any) => {
			return {
				label: item.post_name,
				value: Number(item.post_id),
			};
		});
		state.organizationOption = Op2.map((item: any) => {
			const pathArr = item.organization_path.split('/');
			const value = pathArr[pathArr.length - 1];
			return {
				label: item.organization_name,
				value: Number(value),
			};
		});
		state.sysFiles = Op3;
	});
};

/** 重置按钮操作 */
const resetQuery = () => {
	state.queryParams.id = undefined;
	state.queryParams.name = undefined;
	handleQuery();
};

const handleCurrentChange = (val: number) => {
	state.queryParams.pageNum = val;
	handleQuery();
};
const handleSizeChange = (val: number) => {
	state.queryParams.pageSize = val;
	handleQuery();
};
const householdNatureFormat = (row: any) => {
	return proxy.selectDictLabel(state.householdNatureOptions, row.householdNature);
};
const idTypeFormat = (row: any) => {
	return proxy.selectDictLabel(state.idTypeOptions, row.idType);
};
const levelEducationFormat = (row: any) => {
	return proxy.selectDictLabel(state.levelEducationOptions, row.levelEducation);
};
const marriageFormat = (row: any) => {
	return proxy.selectDictLabel(state.marriageOptions, row.marriage);
};
const positionStatusFormat = (row: any) => {
	return proxy.selectDictLabel(state.positionStatusOptions, row.positionStatus);
};
const sexFormat = (row: any) => {
	return proxy.selectDictLabel(state.sexOptions, row.sex);
};

// 打开新增弹窗
const onOpenAddModule = () => {
	state.isDetail = false;
	state.title = '添加员工档案';
	editModuleRef.value.openDialog({});
};
// 打开编辑弹窗
const onOpenEditModule = (row: object) => {
	state.isDetail = false;
	state.title = '修改员工档案';
	getStaff(row.staffId).then((response) => {
		let formData = {};
		if (response.code == 200) {
			formData = response.data[0];
			editModuleRef.value.openDialog(formData);
		}
	});
};
/** 删除按钮操作 */
const onTabelRowDel = (row: any) => {
	const ids = row.staffId || state.ids;
	ElMessageBox({
		message: '是否确认删除编号为"' + ids + '"的数据项?',
		title: '警告',
		showCancelButton: true,
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(function () {
		return delStaff(ids).then(() => {
			handleQuery();
			ElMessage.success('删除成功');
		});
	});
};

/**** 详情 */
const onTableRowCheck = (row: any) => {
	state.isDetail = true;
	state.title = '查看员工档案';
	getStaff(row.staffId).then((response) => {
		let formData = {};
		if (response.code == 200) {
			formData = response.data[0];
			detailModuleRef.value.openDialog(formData);
		}
	});
};

// 多选框选中数据
const handleSelectionChange = (selection: any) => {
	state.ids = selection.map((item: any) => item.staffId);
	state.single = selection.length != 1;
	state.multiple = !selection.length;
};
// 页面加载时
onMounted(() => {
	getTreeselect();
	// 查询岗位信息
	handleQuery();
	proxy.getDicts('staff_household').then((response: any) => {
		state.householdNatureOptions = response.data;
	});
	proxy.getDicts('staff_id_type').then((response: any) => {
		state.idTypeOptions = response.data;
	});
	proxy.getDicts('education_level').then((response: any) => {
		state.levelEducationOptions = response.data;
	});
	proxy.getDicts('staff_marriage').then((response: any) => {
		state.marriageOptions = response.data;
	});
	proxy.getDicts('staff_position_status').then((response: any) => {
		state.positionStatusOptions = response.data;
	});
	proxy.getDicts('sys_user_sex').then((response: any) => {
		state.sexOptions = response.data;
	});

	proxy.mittBus.on('onEditStaffModule', (res: any) => {
		handleQuery();
	});
});
// 页面卸载时
onUnmounted(() => {
	proxy.mittBus.off('onEditStaffModule');
});
</script>
